<template>
  <div class="list">
    <header>
      <div class="returns" @click="goBack">
        <i @click="goback">
          < </i>
      </div>
      <div class="search">
        <i class="iconfont icon-fangdajing"></i>
        <span>学员风jk套装</span>
      </div>
      <div class="go-shopping">
        <img src="/images/shopping.png" alt="" />
      </div>
    </header>
    <section>
      <div class="list-l">
        <ul class="l-item">
          <li :class="{active:index===selectCategoryIndex}" v-for="(item, index) in leftData" :key="item.id"
            @click="selectCategory(index)">{{ item.name }}</li>
          <!-- <li>上衣</li>
          <li>裤子</li>
          <li>裙子</li>
          <li>内衣</li> -->
        </ul>
      </div>
      <div class="list-r">
        <ul>
          <li class="shop-list">
            <ul class="r-content">
              <li v-for="(i, d) in getRightData" :key="d">
                <img :src="i.imgUrl" alt="" />
                <span>{{ i.name }}</span>
              </li>

              <!-- <li>
                <img src="/images/list-2.webp" alt="" />
                <span>热销爆款</span>
              </li>
              <li>
                <img src="/images/list-3.webp" alt="" />
                <span>针织衫</span>
              </li>
              <li>
                <img src="/images/list-4.webp" alt="" />
                <span>衬衫</span>
              </li> -->
            </ul>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import http from '@/common/api/request.js'

const router = useRouter()
const goback = () => {
router.push('/')
}
const leftData = ref([])  // 存储左侧一级分类数据
const rightData = ref([]) // 存储右侧二级分类数据

onMounted(() => {
  sortData() //自动获取分类数据
})

const sortData = async () => {
  // 1. 调用接口获取分类数据
  let res = await http.$axios({
    url: '/api/goods/list'
  })
  console.log('分类页的数据', res)  // 打印接口返回的原始数据

  // 2. 定义临时数组处理数据
  const leftArr = []    // 临时存储左侧一级分类
  const righttArr = []  // 临时存储右侧二级分类
  // 3. 遍历原始数据，拆分左右数据
  res.forEach(item => {
    // 左侧：只保留一级分类的 id 和 name
    leftArr.push({
      id: item.id,
      name: item.name
    })
    // 右侧：存储当前一级分类下的所有二级分类（即 item.data）
    righttArr.push(item.data)
  });

  // 4. 将处理后的数据赋值给响应式变量
  leftData.value = leftArr    // 左侧导航数据
  rightData.value = righttArr // 右侧详情数据
}

// 选中的一级菜单索引
const selectCategoryIndex = ref(0)

// 将 selectCategoryIndex 的值设置为当前点击的一级菜单索引 index
const selectCategory = (index) => {
  selectCategoryIndex.value = index
}

// 用 “当前选中的一级菜单索引”（selectCategoryIndex.value），去 rightData.value 里找对应的二级菜单数据：
// 例如，当 selectCategoryIndex 为 0 时，getRightData 会返回 rightData.value[0]，也就是第一个一级菜单对应的二级菜单数据。
const getRightData = computed(() => {
  return rightData.value[selectCategoryIndex.value] || []
})

// 选中逻辑：当 index（当前一级菜单的索引）等于 selectCategoryIndex（当前选中的一级菜单索引）
</script>

<style scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.173333rem;
  background-color: #fff;
  border-bottom: 2px solid #f1f1f1;
}

header .returns {
  line-height: 1.173333rem;
  padding: 0 0.533333rem;
}

header .returns i {
  color: #666;
  font-size: 0.693333rem;
}

header .search {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0.16rem 0.266666rem;
  background-color: #eee;
  border-radius: 0.1875rem;
}

header .search i {
  padding-right: 0.16rem;
  color: #666;
  font-size: 0.48rem;
}

header .search span {
  color: #666;
  font-size: 0.373333rem;
}

header .go-shopping {
  padding: 0 0.266666rem;
  margin-top: 0.15rem;
}

header .go-shopping img {
  width: 0.6rem;
  height: 0.6rem;
}

section {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.list-l {
  width: 2rem;
  background-color: #f1f1f1;
  /* border-right: 1px solid #CCCCCC; */
  overflow: hidden;
}

.list-l .l-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.list-l .l-item li {
  width: 100%;
  line-height: 1.333333rem;
  text-align: center;
  font-size: 0.373333rem;
}

.list-l .l-item li.active {
  color: #ff5777;
  border-left: 6px solid #ff5777;
  background-color: #fff;
}

.list-r {
  flex: 1;
  overflow: hidden;
  background-color: #fff;
}

.list-r .shop-list {
  text-align: center;
}

.list-r .shop-list .r-content {
  display: flex;
  flex-wrap: wrap;
}

.list-r .shop-list .r-content li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  padding: 0.266666rem 0;
}

.list-r .shop-list .r-content li img {
  width: 2rem;
  height: 3rem;
}

.list-r .shop-list .r-content li span {
  margin-top: 0.3125rem;
  font-size: 0.3rem;
}
</style>